<template>
	<view style="padding: 30rpx;">
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view class="u-flex">
			<view @click="topleftClick">
				<u-icon name="arrow-left"size="50"color="#000"></u-icon>
			</view>
			<u-search placeholder="龙王医婿" shape="squre" style="margin-left: 20rpx;" @custom="custom"></u-search>
		</view>
		<view style="margin: 50rpx 0 20rpx 0;">
			<view class="u-flex" style="justify-content: space-between;align-items: center;">
				<h3 style="margin-bottom: 20rpx;margin: auto 0;">搜索历史</h3>
				<u-icon name="trash" size="40" @click="deleteClick" v-if="customList.length >=2"></u-icon>
			</view>
			<view class="u-flex" style="flex-wrap: wrap;">
				<view v-for="(item,index) in customList" style="width: 50%;margin: 20rpx 0;">
					<view class="u-line-1" @click="custom(item)">{{item}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customList:[],
				statusBarHeight:0
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			topleftClick(){
				uni.navigateBack({
					
				})
			},
			custom(e){
				if(e == ""){
					e = "龙王医婿"
				}
				console.log(e)
				uni.navigateTo({
					url:"../searchList/searchList?item="+e
				})
			},
			deleteClick(){
				uni.showModal({
					title:"确认删除所有搜索历史？",
					confirmColor:"#f06d2d",
					confirmText:"删除",
					success: (res) => {
						if(res.confirm){
							uni.removeStorageSync("searchFor")
							this.customList = []
						}
					}
				})
				
				
			}
		},
		onLoad() {
			this.customList = uni.getStorageSync("searchFor")
			console.log(this.customList)
		},
		onShow() {
			this.customList = uni.getStorageSync("searchFor")
			console.log(this.customList)
		}
	}
</script>

<style>

</style>
